<template>
  <section>
    <h2>setup-父组件</h2>
    <setup-sub :name="name" :age="age" @sendCount="handleSendCount"></setup-sub>
    <p>子组件计数：{{count}}</p>
  </section>
</template>

<script lang="ts" setup>

// setup加上之后，相当于sciprt中，就在setup函数中
// 定义的变量，不用return，自动会被暴露出去
// 组件只需要引入，不需要注册，自动注册
// 变化：
// 1：因为没有setup()定义，所以setup函数的参数无法使用
// 2：因为就一个script还是在setup内部，所以有些定义（如：props）也会变化：参考了react的钩子函数思想
// 3：没有了return语句，属性和方法会被返回出去，模板上可以直接使用
// 4：组件只需要引入，不需要注册就可以使用

// defineProps(),defineEmits(),computed(),生命周期钩子函数,useStore(),userRouter(),userRoute()

import SetupSub from "./setup-sub.vue";
import {ref} from "vue";

const name = ref("Hydra");
const age = ref("35");

const count = ref(0);

function handleSendCount(value:number) {
    count.value = value;
}

</script>

<style scoped lang="scss">

</style>